<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告管理系统</title>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        body {
            padding: 15px;
            background-color: #f2f2f2;
        }
        .layui-card {
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 1px solid #f6f6f6;
        }
        .layui-table-view {
            margin: 0;
        }
        .layui-form-label {
            width: 80px;
        }
        .layui-input-block {
            margin-left: 110px;
        }
        .layui-layer-content {
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">公告管理</div>
    <div class="layui-card-body">
        <table class="layui-hide" id="post-table" lay-filter="post-table"></table>
    </div>
</div>

<!-- 模板区域 -->
<script type="text/html" id="post-update">
    <form class="layui-form" method="post">
        <div class="layui-form-item" style="padding-right: 50px">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input id="update-title" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="padding-right: 50px">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea id="update-content" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="post-insert">
    <form class="layui-form" method="post">
        <div class="layui-form-item" style="padding-right: 50px">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input id="post-title" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="padding-right: 50px">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea id="post-content" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="post-detail">
    <form class="layui-form" method="post">
        <div class="layui-form-item" style="padding-right: 50px">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input id="post-detail-title" type="text" name="title" required lay-verify="required" placeholder="请输入职位, 如: Java开发工程师" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="padding-right: 50px">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea id="post-detail-content" name="content" placeholder="暂无内容" class="layui-textarea" readonly></textarea>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addPost">
            <i class="layui-icon layui-icon-add-1"></i> 添加公告
        </button>
    </div>
</script>

<script type="text/html" id="barTpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
</script>

<script>
    var layerCallback;
    var json;

    function layerFunc(row) {
        layer.open({
            title: "公告详情 - " + row.title,
            content: '#post-detail',
            offset: 'c',
            area: ["500px", "300px"],
            btn: ['关闭'],
            success: function (layero, index) {
                $("#post-detail-title").val(row.title);
                $("#post-detail-content").val(row.content);
            }
        });
    };

    layui.use(['table', 'layer'], function(){
        var table = layui.table;
        var layer = layui.layer;

        table.render({
            elem: '#post-table',
            url:'/posts/',
            toolbar: '#toolbar',
            parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.size,
                    data: res.data
                }
            },
            cols: [[
                {field:'id', width:80, title: 'ID', sort: true},
                {field:'title', width:200, title: '公告名称'},
                {field:'content', width:400, title:'公告内容'},
                {field:'username', width:150, title: '发布人', templet: function (row) {
                        return row.username || "无此用户";
                    }},
                {field:'createdTime', width:180, title: '创建时间', sort: true},
                {fixed: 'right', width:160, align:'center', toolbar: '#barTpl'}
            ]],
            page: true,
            text: {
                none: '暂无相关公告'
            }
        });

        // 监听工具条(右侧)
        table.on('tool(post-table)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            if(layEvent === 'del'){
                layer.confirm('确定删除公告 "' + data.title + '" 吗?', {
                    skin: 'layui-layer-molv',
                    offset:'c',
                    icon:3,
                    title: '删除确认'
                }, function(index){
                    $.ajax({
                        url: '/posts/' + data.id,
                        type: 'delete',
                        success: function (res) {
                            if (res.code == 200) {
                                obj.del();
                                layer.msg('删除成功', {icon: 1, time: 1500});
                            } else {
                                layer.msg('删除失败: ' + res.msg, {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('请求失败，请稍后再试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){
                layerCallback = function(postTitle, postContent) {
                    obj.update({
                        title: postTitle,
                        content: postContent
                    });
                    layer.close(layer.index);
                };
                json = JSON.stringify(obj.data);
                layer.open({
                    title: '编辑公告',
                    content: 'static/html/layers/post-update.html',
                    type: 2,
                    offset: 'c',
                    area: ["500px", "300px"],
                    maxmin: true
                });
            }
        });

        // 监听头部工具栏
        table.on('toolbar(post-table)', function (obj) {
            if(obj.event === 'addPost'){
                var index = layer.open({
                    title: '新建公告',
                    content: $("#post-insert").html(),
                    offset: 'c',
                    area: ["500px", "300px"],
                    btn: ['提交', '取消'],
                    yes: function(index, layero) {
                        var title = $("#post-title").val();
                        var content = $("#post-content").val();

                        if (!title) {
                            layer.tips('标题不能为空', '#post-title', {tips: 1});
                            return false;
                        }
                        if (!content) {
                            layer.tips('内容不能为空', '#post-content', {tips: 1});
                            return false;
                        }

                        var nowDate = new Date();
                        var username = "${(user.username)!'未登陆'}";

                        $.ajax({
                            url: '/posts',
                            method: 'post',
                            data: {
                                title: title,
                                content: content,
                                username: username,
                                createdTime: nowDate
                            },
                            success: function (res) {
                                if (res.code == 200) {
                                    table.reload("post-table");
                                    layer.msg('公告添加成功', {icon: 1});
                                    layer.close(index);
                                } else {
                                    layer.msg('添加失败: ' + res.msg, {icon: 2});
                                }
                            },
                            error: function() {
                                layer.msg('请求失败，请稍后再试', {icon: 2});
                            }
                        });
                    }
                });
            }
        });
    });
</script>
</body>
</html>